<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="app">
		<view-counter></view-counter>
	</div>


	<script type="text/x-template" id="view-template">
		<div>
		    <h1>{{title}}</h1>
		    <div id='example-1'>
		        <ul>
		            <li v-for="item in searchWords" :key="item.id">
		                <a href="javascript:;" v-on:click="hitHotword(item.word)">{{item.word}}</a>
		            </li>
		        </ul>
		    </div>
		    <br>
		    <div id='example-2'>
			    <input v-model="inputVal" placeholder="edit me">
			    <p>inputVal is: {{ inputVal }}</p>
			</div>
			<br>
		    <div id='example-3'>
			  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
			  <label for="jack">Jack</label>
			  <input type="checkbox" id="john" value="John" v-model="checkedNames">
			  <label for="john">John</label>
			  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
			  <label for="mike">Mike</label>
			  <br>
			  <span>Checked names: {{ checkedNames }}</span>
			</div>
			<br>
			<div id="example-4">
			  <input type="radio" id="one" value="One" v-model="picked">
			  <label for="one">One</label>
			  <br>
			  <input type="radio" id="two" value="Two" v-model="picked">
			  <label for="two">Two</label>
			  <br>
			  <span>Picked: {{ picked }}</span>
			</div>
			<br>
			<div id="example-5">
			  <select v-model="selected">
			    <option disabled value="">请选择</option>
			    <option>A</option>
			    <option>B</option>
			    <option>C</option>
			  </select>
			  <span>Selected: {{ selected }}</span>
			  <br>
			  <br>
			    <select v-model="selected2">
				  <option v-for="option in options" v-bind:value="option.value">
				    {{ option.text }}
				  </option>
				</select>
				<span>Selected: {{ selected2 }}</span>
			</div>
		</div>
	</script>

	<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
	<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
	<script>
		Vue.component('view-counter', {
			template: '#view-template',
			data: function () {
				return {
					title: "Vue Test",
					searchWords:[],
					inputVal: "",
					checkedNames: [],
					picked: '',
					selected: '',
					selected2: 'A',
				    options: [
				      { text: 'One', value: 'A' },
				      { text: 'Two', value: 'B' },
				      { text: 'Three', value: 'C' }
				    ]
				}
			},
			created (){
				//获取搜索热词
				axios.get('https://www.easy-mock.com/mock/5b2b6fb49bd86a040ba4cab0/searchhotword').then((response)=>{
					var lists = response.data.data;
					//console.log(response.data.data);
					this.searchWords = lists
				});
			},
			methods:{
				hitHotword:function(word){
					alert(word);
				}
			}
		});

		// 最后渲染模板
		new Vue({ el: '#app' });
	</script>
</body>
</html>